<!DOCTYPE html><html><head>
      <title>vuejs-axios</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
      
      
      
      
      
      
      
      
      

      <style> 
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
 
      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview   ">
      <h1 class="mume-header" id="vueaxios-%E5%AE%9E%E7%8E%B0%E7%99%BB%E5%BD%95%E6%8B%A6%E6%88%AA%E6%9D%83%E9%99%90%E9%AA%8C%E8%AF%81">vue+axios &#x5B9E;&#x73B0;&#x767B;&#x5F55;&#x62E6;&#x622A;&#x6743;&#x9650;&#x9A8C;&#x8BC1;</h1>

<h2 class="mume-header" id="%E4%B8%80-%E8%B7%AF%E7%94%B1%E6%8B%A6%E6%88%AA">&#x4E00;&#x3001;&#x8DEF;&#x7531;&#x62E6;&#x622A;</h2>

<blockquote>
<p>&#x767B;&#x5F55;&#x62E6;&#x622A;&#x903B;&#x8F91;<br>
&#x7B2C;&#x4E00;&#x6B65;&#xFF1A;&#x8DEF;&#x7531;&#x62E6;&#x622A;<br>
&#x9996;&#x5148;&#x5728;&#x5B9A;&#x4E49;&#x8DEF;&#x7531;&#x7684;&#x65F6;&#x5019;&#x5C31;&#x9700;&#x8981;&#x591A;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x81EA;&#x5B9A;&#x4E49;&#x5B57;&#x6BB5;requireAuth&#xFF0C;&#x7528;&#x4E8E;&#x5224;&#x65AD;&#x8BE5;&#x8DEF;&#x7531;&#x7684;&#x8BBF;&#x95EE;&#x662F;&#x5426;&#x9700;&#x8981;&#x767B;&#x5F55;&#x3002;&#x5982;&#x679C;&#x7528;&#x6237;&#x5DF2;&#x7ECF;&#x767B;&#x5F55;&#xFF0C;&#x5219;&#x987A;&#x5229;&#x8FDB;&#x5165;&#x8DEF;&#x7531;&#xFF0C;&#x5426;&#x5219;&#x5C31;&#x8FDB;&#x5165;&#x767B;&#x5F55;&#x9875;&#x9762;&#x3002;</p>
</blockquote>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">&apos;/&apos;</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">&apos;/&apos;</span><span class="token punctuation">,</span>
        component<span class="token punctuation">:</span> Index
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">&apos;/repository&apos;</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">&apos;repository&apos;</span><span class="token punctuation">,</span>
        meta<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            requireAuth<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">// &#x6DFB;&#x52A0;&#x8BE5;&#x5B57;&#x6BB5;&#xFF0C;&#x8868;&#x793A;&#x8FDB;&#x5165;&#x8FD9;&#x4E2A;&#x8DEF;&#x7531;&#x662F;&#x9700;&#x8981;&#x767B;&#x5F55;&#x7684;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        component<span class="token punctuation">:</span> Repository
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">&apos;/login&apos;</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">&apos;login&apos;</span><span class="token punctuation">,</span>
        component<span class="token punctuation">:</span> Login
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">//&#x5B9A;&#x4E49;&#x5B8C;&#x8DEF;&#x7531;&#x540E;&#xFF0C;&#x6211;&#x4EEC;&#x4E3B;&#x8981;&#x662F;&#x5229;&#x7528;vue-router&#x63D0;&#x4F9B;&#x7684;&#x94A9;&#x5B50;&#x51FD;&#x6570;beforeEach()&#x5BF9;&#x8DEF;&#x7531;&#x8FDB;&#x884C;&#x5224;&#x65AD;&#x3002;</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>requireAuth<span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// &#x5224;&#x65AD;&#x8BE5;&#x8DEF;&#x7531;&#x662F;&#x5426;&#x9700;&#x8981;&#x767B;&#x5F55;&#x6743;&#x9650;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// &#x901A;&#x8FC7;vuex state&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x7684;token&#x662F;&#x5426;&#x5B58;&#x5728;</span>
            <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                path<span class="token punctuation">:</span> <span class="token string">&apos;/login&apos;</span><span class="token punctuation">,</span>
                query<span class="token punctuation">:</span> <span class="token punctuation">{</span>redirect<span class="token punctuation">:</span> to<span class="token punctuation">.</span>fullPath<span class="token punctuation">}</span>  <span class="token comment">// &#x5C06;&#x8DF3;&#x8F6C;&#x7684;&#x8DEF;&#x7531;path&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#xFF0C;&#x767B;&#x5F55;&#x6210;&#x529F;&#x540E;&#x8DF3;&#x8F6C;&#x5230;&#x8BE5;&#x8DEF;&#x7531;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
&#x3000;&#x3000;
</pre><blockquote>
<p>&#x6BCF;&#x4E2A;&#x94A9;&#x5B50;&#x65B9;&#x6CD5;&#x63A5;&#x6536;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF1A;<br>
to: Route: &#x5373;&#x5C06;&#x8981;&#x8FDB;&#x5165;&#x7684;&#x76EE;&#x6807; &#x8DEF;&#x7531;&#x5BF9;&#x8C61;<br>
from: Route: &#x5F53;&#x524D;&#x5BFC;&#x822A;&#x6B63;&#x8981;&#x79BB;&#x5F00;&#x7684;&#x8DEF;&#x7531;<br>
next: Function: &#x4E00;&#x5B9A;&#x8981;&#x8C03;&#x7528;&#x8BE5;&#x65B9;&#x6CD5;&#x6765; resolve &#x8FD9;&#x4E2A;&#x94A9;&#x5B50;&#x3002;&#x6267;&#x884C;&#x6548;&#x679C;&#x4F9D;&#x8D56; next &#x65B9;&#x6CD5;&#x7684;&#x8C03;&#x7528;&#x53C2;&#x6570;&#x3002;<br>
next(): &#x8FDB;&#x884C;&#x7BA1;&#x9053;&#x4E2D;&#x7684;&#x4E0B;&#x4E00;&#x4E2A;&#x94A9;&#x5B50;&#x3002;&#x5982;&#x679C;&#x5168;&#x90E8;&#x94A9;&#x5B50;&#x6267;&#x884C;&#x5B8C;&#x4E86;&#xFF0C;&#x5219;&#x5BFC;&#x822A;&#x7684;&#x72B6;&#x6001;&#x5C31;&#x662F; confirmed &#xFF08;&#x786E;&#x8BA4;&#x7684;&#xFF09;&#x3002;<br>
next(false): &#x4E2D;&#x65AD;&#x5F53;&#x524D;&#x7684;&#x5BFC;&#x822A;&#x3002;&#x5982;&#x679C;&#x6D4F;&#x89C8;&#x5668;&#x7684; URL &#x6539;&#x53D8;&#x4E86;&#xFF08;&#x53EF;&#x80FD;&#x662F;&#x7528;&#x6237;&#x624B;&#x52A8;&#x6216;&#x8005;&#x6D4F;&#x89C8;&#x5668;&#x540E;&#x9000;&#x6309;&#x94AE;&#xFF09;&#xFF0C;&#x90A3;&#x4E48; &gt;URL &#x5730;&#x5740;&#x4F1A;&#x91CD;&#x7F6E;&#x5230; from &#x8DEF;&#x7531;&#x5BF9;&#x5E94;&#x7684;&#x5730;&#x5740;&#x3002;<br>
next(&#x2018;/&#x2019;) &#x6216;&#x8005; next({ path: &#x2018;/&#x2019; }): &#x8DF3;&#x8F6C;&#x5230;&#x4E00;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x5730;&#x5740;&#x3002;&#x5F53;&#x524D;&#x7684;&#x5BFC;&#x822A;&#x88AB;&#x4E2D;&#x65AD;&#xFF0C;&#x7136;&#x540E;&#x8FDB;&#x884C;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x5BFC;&#x822A;&#x3002;</p>
</blockquote>
<blockquote>
<p>&#x786E;&#x4FDD;&#x8981;&#x8C03;&#x7528; next &#x65B9;&#x6CD5;&#xFF0C;&#x5426;&#x5219;&#x94A9;&#x5B50;&#x5C31;&#x4E0D;&#x4F1A;&#x88AB; resolved&#x3002;</p>
</blockquote>
<blockquote>
<p>&#x5176;&#x4E2D;&#xFF0C;to.meta&#x4E2D;&#x662F;&#x6211;&#x4EEC;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5176;&#x4E2D;&#x5C31;&#x5305;&#x62EC;&#x6211;&#x4EEC;&#x521A;&#x521A;&#x5B9A;&#x4E49;&#x7684;requireAuth&#x5B57;&#x6BB5;&#x3002;&#x901A;&#x8FC7;&#x8FD9;&#x4E2A;&#x5B57;&#x6BB5;&#x6765;&#x5224;&#x65AD;&gt;&#x8BE5;&#x8DEF;&#x7531;&#x662F;&#x5426;&#x9700;&#x8981;&#x767B;&#x5F55;&#x6743;&#x9650;&#x3002;&#x9700;&#x8981;&#x7684;&#x8BDD;&#xFF0C;&#x540C;&#x65F6;&#x5F53;&#x524D;&#x5E94;&#x7528;&#x4E0D;&#x5B58;&#x5728;token&#xFF0C;&#x5219;&#x8DF3;&#x8F6C;&#x5230;&#x767B;&#x5F55;&#x9875;&#x9762;&#xFF0C;&#x8FDB;&#x884C;&#x767B;&#x5F55;&#x3002;&#x767B;&#x5F55;&#x6210;&#x529F;&gt;&#x540E;&#x8DF3;&#x8F6C;&#x5230;&#x76EE;&#x6807;&#x8DEF;&#x7531;&#x3002;</p>
</blockquote>
<blockquote>
<p>&#x767B;&#x5F55;&#x62E6;&#x622A;&#x5230;&#x8FD9;&#x91CC;&#x5C31;&#x7ED3;&#x675F;&#x4E86;&#x5417;&#xFF1F;&#x5E76;&#x6CA1;&#x6709;&#x3002;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x53EA;&#x662F;&#x7B80;&#x5355;&#x7684;&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x63A7;&#x5236;&#xFF0C;&#x5E76;&#x4E0D;&#x80FD;&#x771F;&#x6B63;&#x963B;&#x6B62;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x9700;&#x8981;&#x767B;&gt;&#x5F55;&#x6743;&#x9650;&#x7684;&#x8DEF;&#x7531;&#x3002;&#x8FD8;&#x6709;&#x4E00;&#x79CD;&#x60C5;&#x51B5;&#x4FBF;&#x662F;&#xFF1A;&#x5F53;&#x524D;token&#x5931;&#x6548;&#x4E86;&#xFF0C;&#x4F46;&#x662F;token&#x4F9D;&#x7136;&#x4FDD;&#x5B58;&#x5728;&#x672C;&#x5730;&#x3002;&#x8FD9;&#x65F6;&#x5019;&#x4F60;&#x53BB;&#x8BBF;&#x95EE;&#x9700;&#x8981;&#x767B;&gt;&#x5F55;&#x6743;&#x9650;&#x7684;&#x8DEF;&#x7531;&#x65F6;&#xFF0C;&#x5B9E;&#x9645;&#x4E0A;&#x5E94;&#x8BE5;&#x8BA9;&#x7528;&#x6237;&#x91CD;&#x65B0;&#x767B;&#x5F55;&#x3002;<br>
&#x8FD9;&#x65F6;&#x5019;&#x5C31;&#x9700;&#x8981;&#x7ED3;&#x5408; http &#x62E6;&#x622A;&#x5668; + &#x540E;&#x7AEF;&#x63A5;&#x53E3;&#x8FD4;&#x56DE;&#x7684;http &#x72B6;&#x6001;&#x7801;&#x6765;&#x5224;&#x65AD;&#x3002;</p>
</blockquote>
<blockquote>
<p>&#x7B2C;&#x4E8C;&#x6B65;&#xFF1A;&#x62E6;&#x622A;&#x5668;<br>
&#x8981;&#x60F3;&#x7EDF;&#x4E00;&#x5904;&#x7406;&#x6240;&#x6709;http&#x8BF7;&#x6C42;&#x548C;&#x54CD;&#x5E94;&#xFF0C;&#x5C31;&#x5F97;&#x7528;&#x4E0A; axios &#x7684;&#x62E6;&#x622A;&#x5668;&#x3002;&#x901A;&#x8FC7;&#x914D;&#x7F6E;http response inteceptor&#xFF0C;&#x5F53;&#x540E;&#x7AEF;&#x63A5;&gt;&#x53E3;&#x8FD4;&#x56DE;401 Unauthorized&#xFF08;&#x672A;&#x6388;&#x6743;&#xFF09;&#xFF0C;&#x8BA9;&#x7528;&#x6237;&#x91CD;&#x65B0;&#x767B;&#x5F55;&#x3002;</p>
</blockquote>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token comment">// http request &#x62E6;&#x622A;&#x5668;</span>
axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// &#x5224;&#x65AD;&#x662F;&#x5426;&#x5B58;&#x5728;token&#xFF0C;&#x5982;&#x679C;&#x5B58;&#x5728;&#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x6BCF;&#x4E2A;http header&#x90FD;&#x52A0;&#x4E0A;token</span>
            config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> <span class="token template-string"><span class="token string">`token </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>token<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> config<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
<span class="token comment">// http response &#x62E6;&#x622A;&#x5668;</span>
axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> response<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">switch</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">case</span> <span class="token number">401</span><span class="token punctuation">:</span>
                    <span class="token comment">// &#x8FD4;&#x56DE; 401 &#x6E05;&#x9664;token&#x4FE1;&#x606F;&#x5E76;&#x8DF3;&#x8F6C;&#x5230;&#x767B;&#x5F55;&#x9875;&#x9762;</span>
                    store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">LOGOUT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        path<span class="token punctuation">:</span> <span class="token string">&apos;login&apos;</span><span class="token punctuation">,</span>
                        query<span class="token punctuation">:</span> <span class="token punctuation">{</span>redirect<span class="token punctuation">:</span> router<span class="token punctuation">.</span>currentRoute<span class="token punctuation">.</span>fullPath<span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">)</span>   <span class="token comment">// &#x8FD4;&#x56DE;&#x63A5;&#x53E3;&#x8FD4;&#x56DE;&#x7684;&#x9519;&#x8BEF;&#x4FE1;&#x606F;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
&#x3000;&#x3000;
</pre><h2 class="mume-header" id="%E4%BA%8C-http%E6%8B%A6%E6%88%AA">&#x4E8C;&#x3001;http&#x62E6;&#x622A;</h2>

<blockquote>
<p>&#x6700;&#x5168;&#x7684;axios&#x7684;&#x914D;&#x7F6E; &#x589E;&#x52A0;&#x4E86;get&#x548C;post&#x7684;&#x65B9;&#x6CD5;&#x7684;&#x5C01;&#x88C5;&#xFF0C;&#x56E0;&#x4E3A;post&#x65B9;&#x6CD5;&#x4F20;&#x53C2;&#x603B;&#x662F;&#x9700;&#x8981;&#x7528;qs&#x6765;&#x5E8F;&#x5217;&#x5316;&#x8BF7;&#x6C42;&#x53C2;&#x6570;</p>
</blockquote>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript">  <span class="token comment">/**axios&#x5C01;&#x88C5;
 * &#x8BF7;&#x6C42;&#x62E6;&#x622A;&#x3001;&#x76F8;&#x5E94;&#x62E6;&#x622A;&#x3001;&#x9519;&#x8BEF;&#x7EDF;&#x4E00;&#x5904;&#x7406;
 */</span>
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&apos;axios&apos;</span><span class="token punctuation">;</span><span class="token keyword">import</span> <span class="token constant">QS</span> <span class="token keyword">from</span> <span class="token string">&apos;qs&apos;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;vant&apos;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">&apos;../store/index&apos;</span>

<span class="token comment">// &#x73AF;&#x5883;&#x7684;&#x5207;&#x6362;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">==</span> <span class="token string">&apos;development&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&apos;/api&apos;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">==</span> <span class="token string">&apos;debug&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">==</span> <span class="token string">&apos;production&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&apos;http://api.123dailu.com/&apos;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// &#x8BF7;&#x6C42;&#x8D85;&#x65F6;&#x65F6;&#x95F4;</span>
axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">10000</span><span class="token punctuation">;</span>

<span class="token comment">// post&#x8BF7;&#x6C42;&#x5934;</span>
axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>post<span class="token punctuation">[</span><span class="token string">&apos;Content-Type&apos;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&apos;application/x-www-form-urlencoded;charset=UTF-8&apos;</span><span class="token punctuation">;</span>

<span class="token comment">// &#x8BF7;&#x6C42;&#x62E6;&#x622A;&#x5668;</span>
axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>    
    <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// &#x6BCF;&#x6B21;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#x4E4B;&#x524D;&#x5224;&#x65AD;&#x662F;&#x5426;&#x5B58;&#x5728;token&#xFF0C;&#x5982;&#x679C;&#x5B58;&#x5728;&#xFF0C;&#x5219;&#x7EDF;&#x4E00;&#x5728;http&#x8BF7;&#x6C42;&#x7684;header&#x90FD;&#x52A0;&#x4E0A;token&#xFF0C;&#x4E0D;&#x7528;&#x6BCF;&#x6B21;&#x8BF7;&#x6C42;&#x90FD;&#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x4E86;</span>
        <span class="token comment">// &#x5373;&#x4F7F;&#x672C;&#x5730;&#x5B58;&#x5728;token&#xFF0C;&#x4E5F;&#x6709;&#x53EF;&#x80FD;token&#x662F;&#x8FC7;&#x671F;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x5728;&#x54CD;&#x5E94;&#x62E6;&#x622A;&#x5668;&#x4E2D;&#x8981;&#x5BF9;&#x8FD4;&#x56DE;&#x72B6;&#x6001;&#x8FDB;&#x884C;&#x5224;&#x65AD;</span>
        <span class="token keyword">const</span> token <span class="token operator">=</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>token<span class="token punctuation">;</span>        
        token <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> token<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token keyword">return</span> config<span class="token punctuation">;</span>    
    <span class="token punctuation">}</span><span class="token punctuation">,</span>    
    <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>        
        <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>    
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// &#x54CD;&#x5E94;&#x62E6;&#x622A;&#x5668;</span>
axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>    
    <span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>        
        <span class="token keyword">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>            
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>            
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token punctuation">}</span>    
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// &#x670D;&#x52A1;&#x5668;&#x72B6;&#x6001;&#x7801;&#x4E0D;&#x662F;200&#x7684;&#x60C5;&#x51B5;    </span>
    <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>        
        <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>            
            <span class="token keyword">switch</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>                
                <span class="token comment">// 401: &#x672A;&#x767B;&#x5F55;                </span>
                <span class="token comment">// &#x672A;&#x767B;&#x5F55;&#x5219;&#x8DF3;&#x8F6C;&#x767B;&#x5F55;&#x9875;&#x9762;&#xFF0C;&#x5E76;&#x643A;&#x5E26;&#x5F53;&#x524D;&#x9875;&#x9762;&#x7684;&#x8DEF;&#x5F84;                </span>
                <span class="token comment">// &#x5728;&#x767B;&#x5F55;&#x6210;&#x529F;&#x540E;&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x9875;&#x9762;&#xFF0C;&#x8FD9;&#x4E00;&#x6B65;&#x9700;&#x8981;&#x5728;&#x767B;&#x5F55;&#x9875;&#x64CD;&#x4F5C;&#x3002;                </span>
                <span class="token keyword">case</span> <span class="token number">401</span><span class="token punctuation">:</span>                    
                    router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>                        
                        path<span class="token punctuation">:</span> <span class="token string">&apos;/login&apos;</span><span class="token punctuation">,</span>                        
                        query<span class="token punctuation">:</span> <span class="token punctuation">{</span> redirect<span class="token punctuation">:</span> router<span class="token punctuation">.</span>currentRoute<span class="token punctuation">.</span>fullPath <span class="token punctuation">}</span> 
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token comment">// 403 token&#x8FC7;&#x671F;                </span>
                <span class="token comment">// &#x767B;&#x5F55;&#x8FC7;&#x671F;&#x5BF9;&#x7528;&#x6237;&#x8FDB;&#x884C;&#x63D0;&#x793A;                </span>
                <span class="token comment">// &#x6E05;&#x9664;&#x672C;&#x5730;token&#x548C;&#x6E05;&#x7A7A;vuex&#x4E2D;token&#x5BF9;&#x8C61;                </span>
                <span class="token comment">// &#x8DF3;&#x8F6C;&#x767B;&#x5F55;&#x9875;&#x9762;                </span>
                <span class="token keyword">case</span> <span class="token number">403</span><span class="token punctuation">:</span>                     
                    <span class="token function">Toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>                        
                        message<span class="token punctuation">:</span> <span class="token string">&apos;&#x767B;&#x5F55;&#x8FC7;&#x671F;&#xFF0C;&#x8BF7;&#x91CD;&#x65B0;&#x767B;&#x5F55;&apos;</span><span class="token punctuation">,</span>                        
                        duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>                        
                        forbidClick<span class="token punctuation">:</span> <span class="token boolean">true</span>                    
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                    <span class="token comment">// &#x6E05;&#x9664;token                    </span>
                    localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token string">&apos;token&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                    store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;loginSuccess&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                    <span class="token comment">// &#x8DF3;&#x8F6C;&#x767B;&#x5F55;&#x9875;&#x9762;&#xFF0C;&#x5E76;&#x5C06;&#x8981;&#x6D4F;&#x89C8;&#x7684;&#x9875;&#x9762;fullPath&#x4F20;&#x8FC7;&#x53BB;&#xFF0C;&#x767B;&#x5F55;&#x6210;&#x529F;&#x540E;&#x8DF3;&#x8F6C;&#x9700;&#x8981;&#x8BBF;&#x95EE;&#x7684;&#x9875;&#x9762;</span>
                    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>                        
                        router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>                            
                            path<span class="token punctuation">:</span> <span class="token string">&apos;/login&apos;</span><span class="token punctuation">,</span>                            
                            query<span class="token punctuation">:</span> <span class="token punctuation">{</span> 
                                redirect<span class="token punctuation">:</span> router<span class="token punctuation">.</span>currentRoute<span class="token punctuation">.</span>fullPath 
                            <span class="token punctuation">}</span>                        
                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                    <span class="token keyword">break</span><span class="token punctuation">;</span> 
                <span class="token comment">// 404&#x8BF7;&#x6C42;&#x4E0D;&#x5B58;&#x5728;                </span>
                <span class="token keyword">case</span> <span class="token number">404</span><span class="token punctuation">:</span>                    
                    <span class="token function">Toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>                        
                        message<span class="token punctuation">:</span> <span class="token string">&apos;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x4E0D;&#x5B58;&#x5728;&apos;</span><span class="token punctuation">,</span>                        
                        duration<span class="token punctuation">:</span> <span class="token number">1500</span><span class="token punctuation">,</span>                        
                        forbidClick<span class="token punctuation">:</span> <span class="token boolean">true</span>                    
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    
                <span class="token keyword">break</span><span class="token punctuation">;</span>                
                <span class="token comment">// &#x5176;&#x4ED6;&#x9519;&#x8BEF;&#xFF0C;&#x76F4;&#x63A5;&#x629B;&#x51FA;&#x9519;&#x8BEF;&#x63D0;&#x793A;                </span>
                <span class="token keyword">default</span><span class="token punctuation">:</span>                    
                    <span class="token function">Toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>                        
                        message<span class="token punctuation">:</span> error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">,</span>                        
                        duration<span class="token punctuation">:</span> <span class="token number">1500</span><span class="token punctuation">,</span>                        
                        forbidClick<span class="token punctuation">:</span> <span class="token boolean">true</span>                    
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>            
            <span class="token punctuation">}</span>            
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token punctuation">}</span>       
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/** 
 * get&#x65B9;&#x6CD5;&#xFF0C;&#x5BF9;&#x5E94;get&#x8BF7;&#x6C42; 
 * @param {String} url [&#x8BF7;&#x6C42;&#x7684;url&#x5730;&#x5740;] 
 * @param {Object} params [&#x8BF7;&#x6C42;&#x65F6;&#x643A;&#x5E26;&#x7684;&#x53C2;&#x6570;] 
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">get</span> <span class="token operator">=</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> <span class="token operator">...</span>params</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>    
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>        
        axios<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>            
            params<span class="token punctuation">:</span> params        
        <span class="token punctuation">}</span><span class="token punctuation">)</span>        
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>            
            <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token punctuation">}</span><span class="token punctuation">)</span>        
        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>            
            <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>data<span class="token punctuation">)</span>        
        <span class="token punctuation">}</span><span class="token punctuation">)</span>    
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/** 
 * post&#x65B9;&#x6CD5;&#xFF0C;&#x5BF9;&#x5E94;post&#x8BF7;&#x6C42; 
 * @param {String} url [&#x8BF7;&#x6C42;&#x7684;url&#x5730;&#x5740;] 
 * @param {Object} params [&#x8BF7;&#x6C42;&#x65F6;&#x643A;&#x5E26;&#x7684;&#x53C2;&#x6570;] 
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">post</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span><span class="token operator">...</span> params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>    
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>         
        axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token constant">QS</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token operator">...</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span>        
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>            
            <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>        
        <span class="token punctuation">}</span><span class="token punctuation">)</span>        
        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>            
            <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>data<span class="token punctuation">)</span>        
        <span class="token punctuation">}</span><span class="token punctuation">)</span>    
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</pre>
      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>